<template>
  <div class="svg" :class="arrowDown?'svgDown':''" @click="tigger"></div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      arrowDown: false
    }
  },
  methods: {
    tigger() {
      console.log('tigger')
      this.arrowDown = !this.arrowDown
      this.$emit('arrowDown', this.arrowDown)
    }
  }
}
</script>

<style scoped>
.svg{
  width: 14px;
  height: 14px;
  color: red;
  background-image: url('./arrow-up.svg');
  background-position: center;
  background-size: 100% 100%;
}
.svgDown{
  transform: rotate(180deg);
}
</style>
